<script setup>
import { onMounted, reactive } from 'vue'
import { useRoute } from 'vue-router'
import { getQueryString } from '@/hook/universality.js'
const Route = useRoute()
const hash = getQueryString()

const state = ref(0)
const user = reactive({ name: '', pswd: '', pswd2: '', data: {} })

onMounted(() => {
  if (QC.Login.check()) { // 如果是登录状态
    QC.api('get_user_info').success(res => user.data = res.data)// 先拿到用户信息
    if (hash.state == 'login') { // 登录
      QC.Login.getMe((openid, accessToken) => { // 拿到openId和accessToken
        // accessToken有有效时间，存入浏览器。openId唯一，存入数据库和账号绑定
        localStorage.setItem("accessToken", accessToken)
        user.openid = openid

        // 先看数据库有没有这个openId
        myPost("/user/getUsersCountByOpenidQ", { openid }, data => {
          if (data == 0) { // 没有就说明新人，①选择已有账户 ②新建账户
            state.value = 1 // 选择
          } else { // 1说明注册了，返回的是usertoken
            localStorage.setItem('username', user.name) // 只保存一个临时name
            localStorage.setItem("usertoken", data)
            console.log('登录成功')
            window.location = "/"
          }
        })
      })


    } else { } // 非登录，可能是绑定
  }
})


// 1.绑定已有账号
const bd = () => {
  if (!user.name || !user.pswd) {
    myMsgE('用户名或密码不能为空')
    return false;
  }
  // 先登录获取token，再token和openid一起绑定
  myPost("/user/login", { username: user.name, password: user.pswd }, token => {
    if (token == "0") {
      myMsgE('用户名或密码不正确')
      return false;
    } else {

      myPost("/user/bind_openid", { usertoken: token, openid: user.openid }, date => {
        myMsgS('绑定成功')
        localStorage.setItem('username', user.name)
        localStorage.setItem("usertoken", token)
        window.location = "/"
      })
    }
  })
}


// 2.用户选择注册新用户
// 获取QQ名作为默认名字，叫他设置用户名（万一被占用了）和密码
const handleNew = () => {
  state.value = 3
  user.name = user.data.nickname
  myPost("/user/getUsersCountByUserName", { username: user.name }, data => data && myMsgE('该用户名被占用了哦'))
}
// 点击注册
const zc = () => {
  // 普通校验
  if (!user.name.trim() || !user.pswd.trim() || !user.pswd2.trim()) {
    myMsgE('请输入相关信息')
    return false;
  }
  if (user.pswd.trim() != user.pswd2.trim()) {
    myMsgE('两次密码不一致')
    return false;
  }

  // 用户名占用
  myPost("/user/getUsersCountByUserName", { username: user.name.trim() }, data => {
    if (data) {
      myMsgE('该用户名被占用了哦')
      return false
    } else {
      // 没被占用，可以注册
      myPost('/user/regist_qq', { username: user.name.trim(), password: user.pswd.trim() },
        usertoken => {
          myPost("/user/bind_openid", { usertoken, openid: user.openid, userInfoQQ: JSON.stringify(user.data) }, date => {
            myMsgS('注册成功')
            // 设置用户头像为QQ头像
            localStorage.setItem('username', user.name)
            localStorage.setItem("usertoken", usertoken)
            myPost("/user/set/img", { usertoken, value: user.data.figureurl_qq }, () => {
              window.location = "/"
            })
          })
        })
    }
  })
}
// figureurl_qq gender


</script>

<template>
  <div class="mask">
    <div class="model main">
      <!-- {{ user }} -->

      <div v-if="state == 1">
        <div class="tittle">没有找到对应的用户</div>
        <div class="item" @click="state = 2">绑定已有账号</div>
        <div class="item" @click="handleNew">注册新用户</div>
      </div>

      <!-- 绑定已有 -->
      <div v-if="state == 2">
        <div style="margin-bottom: 20px;font-size: 20px;">绑定用户</div>
        <div class="position-lt" @click="state = 1"> ← </div>
        <input type="text" class="username" v-model="user.name" autocomplete="off" placeholder="用户名" />
        <input type="password" class="password" v-model="user.pswd" autocomplete="off" placeholder="密码"
          @keyup.enter="loginClick" />
        <div class="btn" @click="bd">绑定并登录</div>
      </div>

      <!-- 注册新用户 -->
      <div v-if="state == 3">
        <div style="margin-bottom: 20px;font-size: 20px;">注册新用户</div>
        <div class="position-lt" @click="state = 1"> ← </div>
        <input type="text" v-model="user.name" autocomplete="off" placeholder="用户名" />
        <input type="password" v-model="user.pswd" autocomplete="off" placeholder="密码" @keyup.enter="loginClick" />
        <input type="password" v-model="user.pswd2" autocomplete="off" placeholder="确认密码" @keyup.enter="loginClick" />
        <div class="btn" @click="zc">注册并登录</div>
      </div>

    </div>
  </div>
</template>

<style scoped lang="less">
.mask {
  // 背景遮罩
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; // 可以实现全屏
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 51; // 最顶

  .main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    text-align: center;
    flex-direction: column;
    z-index: 51;
    max-width: 600px;
    width: 60%;
    min-width: 370px;
  }

  .tittle {
    color: var(--mini-text-color);
    margin-bottom: 20px;
  }


  .item {
    transition: 0.3s;
    line-height: 50px;
    height: 50px;
    width: 100%;
    text-align: center;
    border-radius: 10px;

    &:hover {
      box-shadow: var(--model-shadow);
    }
  }
}




.btn {
  margin: 20px auto 0px;
  transition: 0.3s;
  line-height: 40px;
  height: 40px;
  width: 60%;
  text-align: center;
  border-radius: 10px;
  background: var(--model-back-color);

  &:hover {
    background: var(--model-back-color-hover);
    box-shadow: var(--model-shadow);
  }
}

.position-lt {
  position: absolute;
  top: 5px;
  left: 10px;
}

input {
  display: inline-block;
  color: var(--text-color);
  text-align: center;
  height: 40px;
  width: 70%;
  font-size: 20px;
  border: 0px;
  background: transparent;
  border-bottom: 1px solid var(--mini-text-color);

  /* 去除自动浏览器自动填充添加的样式 */
  &:-webkit-autofill,
  &:-webkit-autofill:hover,
  &:-webkit-autofill:focus,
  &:-webkit-autofill:active {
    -webkit-transition-delay: 9999s;
    -webkit-transition: color 9999s ease-out, background-color 9999s ease-out;
  }
}
</style>